<template>
  <div>
    <!-- 循环使用组件，并传入数据 -->
    <myProduct v-for="(item,index) in list" :key="item.id"
    :title="item.proname"
    :price="item.proprice"
    :index="index"
    :info="item.info"
    v-on:subprice="fn"></myProduct>
  </div>
</template>

<script>

/**
 *  子传父步骤
 *  1、子组件内，恰当的时机this.$emit(自定义事件名, 值)
 *  2、父组件内，给组件@自定义事件=“父methods中的函数名”
 * 
 */ 
import myProduct from "./components/myProduct.vue"
export default {
  components: {myProduct},
  data(){
    return {
      list: [
          { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
          { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
          { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
      ],
    }
  },
  methods: {
    fn(index,price){
      // console.log(index,price);
      // 通过子传父实现砍价功能
      let obj = this.list[index]
      obj.proprice = obj.proprice - price;
    }
  }
}
</script>

<style>

</style>